XPath with Attributes is a powerful technique used in Selenium WebDriver to locate web elements by using their HTML attributes. Attributes such as id, name, class, type, value, href, placeholder, title, role, and custom attributes can be combined with XPath to create targeted element locators.
XPath is included among the locator strategies covered in Selenium training at JustAcademy, along with CSS selectors and other WebElement-location techniques. JustAcademy Selenium Training Course
You can also visit the Selenium Course Demo Registration page for course-demo information.
XPath with Attributes is an XPath expression that identifies an HTML element by checking one or more attributes of that element.
The basic syntax is:
//tagname[@attribute='value']For example:
//input[@id='username']This XPath searches for an input element whose id attribute has the value username.
An HTML attribute provides additional information about an HTML element. Attributes are normally written inside the opening tag.
Example:
<input id="username" name="user" type="text" placeholder="Enter Username">In this example, the element contains several attributes:
| Attribute | Value | Purpose |
|---|---|---|
| id | username | Uniquely identifies the element when designed to be unique |
| name | user | Provides a name for the element |
| type | text | Defines the input type |
| placeholder | Enter Username | Displays hint text inside the input |
The most common syntax for XPath with an attribute is:
//tagname[@attribute='value']Example:
//input[@id='username']Here:
The id attribute is commonly used to construct XPath expressions.
HTML:
<input id="username" type="text">XPath:
//input[@id='username']Selenium:
driver.findElement(By.xpath("//input[@id='username']")).sendKeys("admin");This expression locates an input element whose id is username.
The name attribute can also be used to identify an element.
HTML:
<input name="username" type="text">XPath:
//input[@name='username']Selenium:
driver.findElement(By.xpath("//input[@name='username']")).sendKeys("admin");The class attribute can be used to locate elements based on their CSS class value.
HTML:
<input class="login-input" type="text">XPath:
//input[@class='login-input']Selenium:
driver.findElement(By.xpath("//input[@class='login-input']")).sendKeys("admin");Exact class matching should be used carefully because an element can contain multiple class names.
The type attribute is useful for identifying specific types of input elements.
HTML:
<input type="email" id="email">XPath:
//input[@type='email']A more specific XPath can be:
//input[@type='email' and @id='email']The value attribute can be used when the element contains a useful value.
HTML:
<input type="submit" value="Login">XPath:
//input[@value='Login']Selenium:
driver.findElement(By.xpath("//input[@value='Login']")).click();The placeholder attribute is frequently used with input fields.
HTML:
<input type="text" placeholder="Enter Username">XPath:
//input[@placeholder='Enter Username']Selenium:
driver.findElement(By.xpath("//input[@placeholder='Enter Username']")).sendKeys("admin");The title attribute can provide additional information about an element and can also be used in XPath.
HTML:
<button title="Login to Application">Login</button>XPath:
//button[@title='Login to Application']The href attribute is commonly used for locating links.
HTML:
<a href="/home">Home</a>XPath:
//a[@href='/home']Selenium:
driver.findElement(By.xpath("//a[@href='/home']")).click();Multiple attributes can be combined when one attribute is not sufficient to identify an element.
HTML:
<input id="username" name="user" type="text">XPath:
//input[@id='username' and @name='user']Another example:
//input[@type='text' and @name='user']Multiple attributes can make an XPath more specific when several elements share the same tag or individual attribute values.
The and operator is used when all specified attribute conditions must be satisfied.
//input[@type='text' and @name='username']This expression requires both conditions to be true.
Another example:
//button[@id='loginBtn' and @type='submit']The or operator is used when either condition can match the required element.
//input[@id='username' or @name='username']This XPath can match an input where either the id or name attribute has the value username.
Several attributes can be combined to create a more precise locator.
HTML:
<input id="username" name="user" type="text" placeholder="Enter Username">XPath:
//input[@id='username' and @name='user' and @type='text']Another example:
//input[@name='user' and @placeholder='Enter Username']Sometimes the complete attribute value is not stable. In such cases, the contains() function can be used.
HTML:
<input id="username_12345" type="text">XPath:
//input[contains(@id,'username')]This XPath searches for an input whose id contains the text username.
The contains() function is useful when only part of an attribute value is known or stable.
Syntax:
//tagname[contains(@attribute,'partial-value')]Example:
//button[contains(@id,'login')]This can match a button whose id contains login.
The starts-with() function identifies elements where an attribute value begins with a specified string.
HTML:
<input id="username_12345" type="text">XPath:
//input[starts-with(@id,'username')]This can be useful when an application generates dynamic IDs with a predictable prefix.
Attributes can be combined with visible text to create a more specific locator.
HTML:
<button id="loginBtn">Login</button>XPath:
//button[@id='loginBtn' and text()='Login']Another example:
//button[@type='submit' and contains(text(),'Login')]When visible text contains additional whitespace, normalize-space() can be combined with an attribute condition.
//button[@id='loginBtn' and normalize-space()='Login']This can help when whitespace around the visible text affects an exact text comparison.
Consider the following HTML:
<input id="username" name="username" type="text" placeholder="Enter Username">Possible XPath expressions include:
//input[@id='username']//input[@name='username']//input[@placeholder='Enter Username']//input[@type='text' and @name='username']Selenium example:
driver.findElement(By.xpath("//input[@id='username']")).sendKeys("admin");HTML:
<input id="password" name="password" type="password">XPath:
//input[@id='password']Using multiple attributes:
//input[@name='password' and @type='password']Selenium:
driver.findElement(By.xpath("//input[@name='password' and @type='password']")).sendKeys("admin123");HTML:
<button id="loginBtn" type="submit">Login</button>XPath using ID:
//button[@id='loginBtn']XPath using type:
//button[@type='submit']XPath using multiple attributes:
//button[@id='loginBtn' and @type='submit']XPath using text and attribute:
//button[@id='loginBtn' and text()='Login']HTML:
<input id="terms" type="checkbox" name="terms">XPath:
//input[@id='terms']Using multiple attributes:
//input[@type='checkbox' and @name='terms']Selenium:
driver.findElement(By.xpath("//input[@type='checkbox' and @name='terms']")).click();HTML:
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
XPath for the male radio button:
//input[@type='radio' and @value='male']XPath for the female radio button:
//input[@type='radio' and @value='female']HTML:
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select>
XPath for the select element:
//select[@id='country']XPath for the India option:
//select[@id='country']/option[@value='india']XPath using text:
//select[@id='country']/option[text()='India']HTML:
<a href="/products" id="productsLink">Products</a>Using href:
//a[@href='/products']Using ID:
//a[@id='productsLink']Using both attributes:
//a[@id='productsLink' and @href='/products']An HTML element can contain multiple class names.
Example:
<button class="btn btn-primary login-button">Login</button>An exact class match would be:
//button[@class='btn btn-primary login-button']However, if the class list can change, contains() can be used:
//button[contains(@class,'login-button')]Another approach is to use a class-token pattern:
//button[contains(concat(' ',normalize-space(@class),' '),' login-button ')]Modern web applications may generate IDs dynamically.
Example:
<input id="user_12345" type="text">Another page load might produce:
<input id="user_67890" type="text">Instead of depending on the changing number, use a stable part:
//input[contains(@id,'user_')]If the stable prefix is known, starts-with() can also be used:
//input[starts-with(@id,'user_')]Dynamic applications can also generate changing class values.
Example:
<button class="btn-login-123">Login</button>XPath:
//button[contains(@class,'btn-login')]The expression focuses on the stable portion of the class value.
XPath can check whether an element contains a particular attribute.
For example:
//input[@required]This selects input elements that have the required attribute.
Another example:
//button[@disabled]This selects buttons that have the disabled attribute.
The not() function can be used to exclude elements with a particular attribute or condition.
Example:
//input[not(@disabled)]This identifies input elements that do not have the disabled attribute.
Another example:
//button[not(@type='button')]This excludes buttons whose type attribute is button.
When an attribute value contains special characters or quotation marks, the XPath expression must be constructed carefully.
Simple value:
//input[@placeholder='Enter Username']For complex string values, XPath string functions or appropriate quoting techniques may be required.
An attribute-based XPath can be combined with parent navigation.
HTML:
<div class="login-form">
<input id="username">
</div>
XPath:
//input[@id='username']/parent::divThis locates the div parent of the input identified using its id attribute.
An attribute condition can identify a parent and then navigate to its child element.
HTML:
<div id="loginForm">
<input name="username">
<input name="password">
</div>
Username:
//div[@id='loginForm']/input[@name='username']Password:
//div[@id='loginForm']/input[@name='password']The descendant relationship can be used when the target element may be located at different nesting levels.
//form[@id='loginForm']//input[@name='username']The double slash after the form allows the XPath to search for matching input descendants at different levels inside the form.
Combining attributes with DOM relationships can create targeted locators.
Example:
//div[@id='loginForm']//button[@type='submit']This searches for a submit button inside the element whose id is loginForm.
Attributes can identify one element, and following-sibling can locate a related element.
HTML:
<label for="username">Username</label>
<input id="username" type="text">
XPath:
//label[@for='username']/following-sibling::input[@id='username']The preceding-sibling axis can locate an element appearing before another element.
//input[@id='username']/preceding-sibling::labelA more specific version can be:
//input[@id='username']/preceding-sibling::label[@for='username']The ancestor axis can locate a higher-level element using an attribute condition.
//input[@id='username']/ancestor::form[@id='loginForm']This searches for the loginForm ancestor of the username input.
The descendant axis can be explicitly used with attributes.
//form[@id='loginForm']/descendant::input[@type='text']This identifies text input elements inside the form.
Attributes are useful when working with tables containing unique IDs.
HTML:
<table id="employees">
<tr>
<td>John</td>
<td>QA Tester</td>
</tr>
</table>
Table:
//table[@id='employees']First row:
//table[@id='employees']//tr[1]First cell:
//table[@id='employees']//tr[1]/td[1]Suppose the table contains:
<table id="employees">
<tr>
<td>101</td>
<td>John</td>
<td>QA Tester</td>
</tr>
</table>
The row can be located using:
//table[@id='employees']//tr[td[text()='John']]The role cell can then be located using:
//table[@id='employees']//tr[td[text()='John']]/td[3]Modern web applications often use custom data attributes such as data-testid, data-id, data-role, or data-name.
HTML:
<button data-testid="login-button">Login</button>XPath:
//button[@data-testid='login-button']Another example:
//div[@data-role='login-form']Custom attributes can be useful when they are stable and intentionally provided for automation or testing.
Accessibility-related attributes such as aria-label can sometimes provide meaningful locator values.
HTML:
<button aria-label="Search">Search</button>XPath:
//button[@aria-label='Search']This can locate the button using its aria-label attribute.
The role attribute can also be used when it is present and provides a stable value.
HTML:
<button role="button" id="submitBtn">Submit</button>XPath:
//button[@role='button' and @id='submitBtn']Multiple custom attributes can be combined just like standard HTML attributes.
//button[@data-testid='login-button' and @aria-label='Login']This requires both attribute conditions to match.
When part of an attribute is stable and another part changes, contains() can be used.
Example:
<button id="submit-order-12345">Submit</button>XPath:
//button[contains(@id,'submit-order')]This avoids depending on the changing numeric portion.
starts-with() is useful when the beginning of the attribute remains consistent.
//button[starts-with(@id,'submit-order')]This identifies buttons whose id begins with submit-order.
An exact attribute match is used when the complete attribute value is known.
//input[@id='username']Exact matching is simple and readable when the attribute value is stable.
A partial match is useful when the complete attribute value is not stable.
//input[contains(@id,'username')]This can match elements whose id contains username.
XPath attribute conditions can be used to compare an element's attribute value with a required value.
| Condition | Example |
|---|---|
| Exact Attribute | //input[@id='username'] |
| Contains Attribute | //input[contains(@id,'user')] |
| Starts With | //input[starts-with(@id,'user')] |
| Multiple Attributes | //input[@id='username' and @type='text'] |
| OR Conditions | //input[@id='username' or @name='username'] |
| Attribute Exists | //input[@required] |
| Attribute Excluded | //input[not(@disabled)] |
Selenium WebDriver uses By.xpath() to pass an XPath expression to findElement() or findElements().
WebElement username = driver.findElement(
By.xpath("//input[@id='username']")
);
The returned WebElement can then be used for actions such as typing, clicking, reading text, or retrieving attributes.
sendKeys() can enter text into an element located using an attribute-based XPath.
driver.findElement(
By.xpath("//input[@name='username']")
).sendKeys("admin");
click() can be used after locating buttons, links, checkboxes, radio buttons, and other clickable elements.
driver.findElement(
By.xpath("//button[@id='loginBtn']")
).click();
getAttribute() can retrieve an attribute value from a located WebElement.
String idValue = driver.findElement(
By.xpath("//input[@name='username']")
).getAttribute("id");
System.out.println(idValue);
getText() retrieves visible text from an element located using an attribute-based XPath.
String buttonText = driver.findElement(
By.xpath("//button[@id='loginBtn']")
).getText();
System.out.println(buttonText);
findElements() can locate multiple elements matching an attribute-based XPath.
List<WebElement> textInputs = driver.findElements(
By.xpath("//input[@type='text']")
);
System.out.println(textInputs.size());
Attribute-based XPath can be combined with explicit waits when elements are loaded dynamically.
WebDriverWait wait =
new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement loginButton = wait.until(
ExpectedConditions.elementToBeClickable(
By.xpath("//button[@id='loginBtn']")
)
);
loginButton.click();
Attribute-based XPath locators can be stored inside Page Object Model classes to keep locators organized.
public class LoginPage {
private WebDriver driver;
private By username =
By.xpath("//input[@id='username']");
private By password =
By.xpath("//input[@id='password']");
private By loginButton =
By.xpath("//button[@id='loginBtn']");
public LoginPage(WebDriver driver) {
this.driver = driver;
}
public void login(String user, String pass) {
driver.findElement(username).sendKeys(user);
driver.findElement(password).sendKeys(pass);
driver.findElement(loginButton).click();
}
}
Consider the following login form:
<form id="loginForm">
<input id="username" name="username" type="text">
<input id="password" name="password" type="password">
<button id="loginBtn" type="submit">Login</button>
</form>
Username:
//input[@id='username']Password:
//input[@id='password']Login button:
//button[@id='loginBtn']Using the form as a context:
//form[@id='loginForm']//input[@name='username']import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class XPathAttributesExample {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://example.com/login");
driver.findElement(
By.xpath("//input[@id='username']")
).sendKeys("admin");
driver.findElement(
By.xpath("//input[@id='password']")
).sendKeys("admin123");
driver.findElement(
By.xpath("//button[@id='loginBtn']")
).click();
driver.quit();
}
}
| Feature | XPath with Attribute | ID Locator |
|---|---|---|
| Selenium Method | By.xpath() | By.id() |
| Attribute Support | Can use many attributes | Uses the ID value |
| Text Support | Can combine attributes with text | Does not directly use text |
| Multiple Conditions | Supported | Not applicable in the same XPath-style expression |
| Functions | contains(), starts-with(), normalize-space(), etc. | Not applicable |
| Relationships | Parent, child, sibling, ancestor, descendant, etc. | Not applicable |
| Feature | XPath | CSS Selector |
|---|---|---|
| Attribute Selection | Supported | Supported |
| Text Matching | Supported through XPath functions | Does not provide XPath-style text() matching |
| Parent Navigation | Supported | Different capabilities depending on selector and browser support |
| Sibling Navigation | Supported | Supported through CSS combinators |
| Functions | Contains, starts-with, normalize-space, etc. | Uses CSS selector syntax and pseudo-classes |
| Selenium Method | By.xpath() | By.cssSelector() |
Example:
$x("//input[@id='username']")Multiple-attribute example:
$x("//input[@id='username' and @type='text']")Contains example:
$x("//button[contains(@id,'login')]")An attribute-based XPath should be checked to determine whether it identifies the intended element.
Example:
$x("//input[@id='username']")If multiple elements are returned, the locator may need additional conditions.
For example:
//form[@id='loginForm']//input[@id='username']Another approach is to combine attributes:
//input[@id='username' and @type='text']Open Browser
↓
Open Web Application
↓
Inspect Web Element
↓
Identify Available Attributes
↓
Select Stable Attribute
↓
Create XPath Expression
↓
Add Multiple Conditions if Required
↓
Validate XPath in Browser
↓
Use By.xpath()
↓
Locate WebElement
↓
Perform Action
↓
Validate Result
↓
Continue Test Execution
| Purpose | Example |
|---|---|
| ID | //input[@id='username'] |
| Name | //input[@name='username'] |
| Class | //input[@class='login-input'] |
| Type | //input[@type='text'] |
| Value | //input[@value='Login'] |
| Placeholder | //input[@placeholder='Enter Username'] |
| Href | //a[@href='/home'] |
| Title | //button[@title='Login'] |
| Exact Attribute | //input[@id='username'] |
| Contains Attribute | //input[contains(@id,'user')] |
| Starts With | //input[starts-with(@id,'user')] |
| Multiple Attributes | //input[@id='username' and @type='text'] |
| OR Conditions | //input[@id='username' or @name='username'] |
| Attribute Exists | //input[@required] |
| Exclude Attribute | //input[not(@disabled)] |
| Data Attribute | //button[@data-testid='login-button'] |
| ARIA Attribute | //button[@aria-label='Search'] |
Create a login page containing the following elements:
Create XPath expressions using attributes for each element.
//input[@id='username']
//input[@id='password' and @type='password']
//input[@data-testid='remember-me']
//button[@id='loginBtn' and @type='submit']
//a[contains(@href,'forgot-password')]
Validate each XPath using:
$x("YOUR_XPATH")XPath with Attributes is an XPath technique used to locate web elements by matching their HTML attributes and attribute values.
//tagname[@attribute='value']//input[@id='username']//input[@id='username' and @type='text']//input[contains(@id,'user')]starts-with() is used when the beginning portion of an attribute value is stable while the remaining portion may change.
Yes. An attribute can be checked directly.
//input[@required]Yes. The not() function can be used.
//input[not(@disabled)]Yes. The and operator can combine multiple attribute conditions.
Yes. The or operator can be used when either condition may identify the element.
Use the browser Console and the $x() function to test the XPath expression.
Yes. Stable portions of dynamic attributes can be targeted using functions such as contains() and starts-with().
XPath with Attributes is an important Selenium WebDriver technique for locating web elements using their HTML attributes. It allows testers to create targeted XPath expressions using attributes such as id, name, class, type, value, href, placeholder, title, data attributes, and accessibility-related attributes.
Attribute-based XPath can also be combined with multiple conditions, XPath functions such as contains() and starts-with(), visible text, parent-child relationships, sibling relationships, and other DOM navigation techniques. These capabilities make it possible to construct locators for both simple and complex web applications.
When working with dynamic applications, stable portions of attribute values can be targeted instead of relying on changing values. XPath expressions should also be validated in browser Developer Tools and kept as simple and readable as practical.
JustAcademy's Selenium training covers Selenium WebDriver, locators including XPath and CSS selectors, WebElements, browser automation, waits, dynamic elements, TestNG, Page Object Model, framework development, and practical automation projects. Explore JustAcademy Selenium Training.
For additional course information, visit the JustAcademy Selenium Course Demo Registration page.
